/**
 * Created by xieyicheng on 2014/11/23.
 */
(function () {
    var multi_file = document.getElementById('multi-file'),                 // 获取上传控件
        file_list = document.getElementById('file-list'),                   // 获取列表控件
        slice = Array.prototype.slice;                                      // 获取数组slice原型方法

    var GUID = 0;
    function guid() { return GUID++; };                                     // 全球唯一标识符生成函数

    multi_file.addEventListener('change', function (e) {                    // 监听上传控件数据变化
        var files = slice.call(multi_file.files, 0),                        // 将FileList对象转为数组获取forEach方法
            htmls = ['<tr><th>文件名</th><th>类型</th><th>大小</th><th>预览</th></tr>']; // 列表标题

        files.forEach(function (file, index) {                        // 循环File数组
            var reader,                                                     // reader变量存放FileReader实例
                _guid = guid();                                             // 获取全球唯一标识符

            // 组装 File对象的 name、type、size属性为html
            htmls.push('<tr><td>' + file.name + '</td><td>' + file.type + '</td><td>' + file.size + '</td><td id="J_' + _guid + '"></td></tr>');

            if (file.type.toLowerCase().match(/image.*/)) {                 // 正则判断文件是否为图片类型
                reader = new FileReader();                                  // 实例化FileReader对象，用于读取文件数据
                reader.addEventListener('load', function (e) {              // 监听FileReader实例的load事件
                    // 获取对应元素，并填充相应图片
                    document.getElementById('J_' + _guid).innerHTML = '<img title="' + file.name + '" alt="' + file.name + '" src="' + e.target.result + '"/>';
                });
                reader.readAsDataURL(file);                                 // 读取文件为DataURL
            };
        });
        file_list.innerHTML = htmls.join('');                               // 重设列表html
    }, false);
})();